/* bannner */
.custom_banner {
  height: 314px;
  background: url(./../uploads/custom_banner.jpg);
}

body {
  background-color: #f9f9f9;
}

/* icons  ****************************** */
.icons {
  height: 366px;
}

.icons ul li {
  float: left;
  width: 25%;
  height: 366px;
  /* background-color: pink; */
}
/* 动画开始******* */
.icons ul li span {
  display: block;
  transition: all 0.5s;
  animation: tiao 1.5s linear infinite;
}
/* .icons ul li:hover span {
  transform: scale(1.5);
} */
@keyframes tiao {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }

  50% {
    transform: rotateZ(180deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.icons_list .pic {
  animation: rotate 1.5s linear infinite;
  transition: all 0.5s;
}

/* 动画结束 */

.icons_list .pic {
  width: 108px;
  height: 108px;
  line-height: 108px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #00a0e9;
  margin: 96px auto 20px;
}

.icons_list .iconfont {
  color: #00a0e9;
  font-size: 45px;
}

.icons_list p {
  text-align: center;
  font-size: 12px;
  color: #999999;
}
.icons_list .tit {
  color: #333333;
  margin-bottom: 13px;
}

/* pics ************************************/
.pics {
  height: 611px;
}

.pics .w {
  background-color: #fff;
}

.pics_list {
  width: 1044px;
  margin: 0 auto;
  padding-top: 73px;
}

.pics_list li {
  float: left;
  height: 538px;
}

/* .li_1 */

.li_1 {
  position: relative;
  width: 252px;
  overflow: hidden;
}

/* 动画代码开始********************* */
/* 给文本盒子加绝对定位  定位到左侧隐藏起来 鼠标悬停的时候  x轴移动275px到屏幕里 */
.li_1 .text {
  position: absolute;
  top: 0;
  left: -275px;
  padding: 38px 0 0 15px;
  color: #fff;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 237px;
  height: 500px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.li_1:hover .text {
  transform: translate(275px, 0);
}

.li_1 img {
  transition: all 0.5s ease-in-out;
}
.li_1:hover img {
  transform: scale(1.1);
}

/* 动画代码结束********************* */

.li_1 .text .up {
  width: 225px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 32px;
}

.li_1 .text .up h3 {
  font-size: 20px;
  margin-bottom: 22px;
}
.li_1 .text .up h3 i {
  font-size: 14px;
}

.li_1 .text .up h4 {
  font-size: 16px;
  margin-bottom: 26px;
  font-weight: 400;
}

.li_1 .text .up span {
  display: block;
  padding: 6px 0 20px;
}

.li_1 .text .down p {
  line-height: 24px;
}
/* .li_2 */
.li_2 {
  position: relative;
  width: 324px;
}

/* 文字动画 开始********************** */
.li_2 .mask {
  position: absolute;
  left: 44px;
  bottom: 50px;
  width: 236px;
  height: 180px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-align: center;
  color: #00a0e9;
  transition: all 0.5s;
}

.li_2:hover .mask {
  opacity: 0;
}

/* 文字动画 结束********************** */

.li_2 .mask {
  position: absolute;
  left: 44px;
  top: 310px;
  width: 236px;
  height: 180px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  text-align: center;
  color: #00a0e9;
}

.li_2 .mask p {
  font-size: 16px;
  line-height: 22px;
}

.li_2 .mask .p1 {
  margin-top: 44px;
}

.li_2 .mask .p2 {
  margin-bottom: 16px;
}
.li_2 .mask h4 {
  border-top: 2px solid #00a0e9;
  font-size: 20px;
}

/* .li_3 */

.li_3 {
  position: relative;
  width: 225px;
  overflow: hidden;
}
.li_3 span {
  position: absolute;
  width: 100px;
  height: 30px;
  background-color: #f54142;
  right: -30px;
  top: 10px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  transform: rotate(45deg);
}

/* .li_4 */
.li_4 {
  position: relative;
  width: 225px;
  overflow: hidden;
}

.li_4 span {
  position: absolute;
  width: 100px;
  height: 30px;
  background-color: #44b15e;
  right: -30px;
  top: 10px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  transform: rotate(45deg);
}
/* hot ************************************** */
.hot {
  height: 393px;
  margin: 52px auto 83px;
  /* background-color: pink; */
}
/* hot_hd */
.hot .hot_hd {
  position: relative;
  font-size: 12px;
  height: 65px;
  padding-top: 30px;
}

.hot .hot_hd span {
  position: absolute;
  width: 4px;
  height: 39px;
  background-color: #009fe9;
  left: -10px;
  top: 32px;
}

.hot .hot_hd h3 {
  font-size: 18px;
  color: #555555;
  font-weight: 400;
}
/* hot_list */
.hot .hot_list li {
  float: left;
  width: 286px;
  height: 297px;
  margin-right: 14px;
  background-color: #fff;
}
/* hot_list li img */

/* 动画代码开始********** */
.hot .hot_list li img {
  display: block;
  margin: 12px 35px 18px;
  transition: all 0.5s;
  cursor: pointer;
}

/* 图片放大效果 */
.hot .hot_list li:hover img {
  transform: scale(1.2);
}

/* 动画代码结束********** */

/* hot_txt */
.hot .hot_list .hot_txt {
  margin-left: 35px;
  font-size: 14px;
  line-height: 24px;
}

.hot_list .hot_txt i {
  text-decoration: line-through;
}

/* bear */
.bear {
  height: 100px;
  background-color: #f3f3f3;
}
.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: url(./../uploads/bear.png) no-repeat;
  /* 可以添加2组动画 用逗号隔开就好 */
  animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -1600px 0;
  }
}
@keyframes move {
  0% {
    left: 0;
  }

  100% {
    left: 50%;
    transform: translateX(-50%);
  }
}
